{extend name='layout:app' /}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/myorder.css">
<style>
    .iconfont{
        color:#21A4FE
    }
    .list-bot .option:nth-child(3){
        border-left:1px solid #ddd
    }
    .list-bot .option:nth-child(2){
        border-left:1px solid #ddd
    }
    .list-bot .option{
        flex:1;padding:10px 0;color:#21A4FE
    }
    .list-bot .option .iconfont{
        font-size:30px
    }
    .list-bot{
        display:flex;align-items:center;text-align:center;background:#fff
    }
</style>
{/block}

{block name='content'}
<div id="app">
    <div class="nav">
        <i class="el-icon-arrow-left icon_left" @click="back"></i>
        <div>我的收件订单</div>
        <i class="iconfont icon-home icon_right" @click="home"  style="color: black;"></i>
    </div>

    <div class="order">
        <div class="order-sort" @click="orderSort">
            <div class="sort active">进行中</div>
            <div class="sort">已完成</div>
        </div>
        <div class="order-list" v-cloak>
            <div class="list" v-for="order in orderList" style="clear:both">
                <div style="display: flex;">
                    <div class="item icon"><i class="iconfont icon-send"></i></div>
                    <div class="item">
                        <div class="order-num">订单号：<span>{{order.billcode}}</span></div>
                        <div v-if="order.code != null" class="addr">取件码：{{order.code}}</div>
                        <!--<div><span class="name">{{order.name}}</span><span class="phone">{{order.phone}}</span></div>-->
                        <div v-if="order.code == null" class="addr">收件人信息：{{order.addr}}</div>
                        <div class="date" style="color: #C6C6C6">{{order.create_time}}</div>
                    </div>
                </div>
                <div class="list-bot"style="border-top:1px solid #ddd;">
                    <div class="option" v-if="order.status == 1">
                        <a class="option"  :href="'tel:'+order.sender_phone"  v-if="order.status == 1">
<!--                            <i class="iconfont icon-jiedan"></i>-->
                            <span>联系快递员</span>
                        </a>
                    </div>
                    <a class="option"  href="tel:17380054687"  v-if="order.status == 1">
<!--                        <i class="iconfont icon-contact-service"></i>-->
                        <span>投诉</span>
                    </a>
                    <a class="option" @click="perfect(order.billcode)" v-if="order.status == 1">
                        <!--                        <i class="iconfont icon-contact-service"></i>-->
                        <span>确认取件</span>
                    </a>
                    <a class="option" v-if="order.status == 0" @click="cancel(order.billcode)">取消订单</a>
                </div>
<!--                <div class="item" style="margin-top: 3%;">
                    <hr>
                    <br>
                    <a class="express-check"  :href="'tel:'+order.sender_phone" v-if="order.status == 1" style="font-size: 20px;right: 0;text-align: center;">
                        <i class="iconfont icon-contact-service" style="font-size: 26px;"></i>
                        <span style="flex: 1">联系快递员</span>
                        <span style="flex: 1"></span>
                    </a>
                    <a class="express-check" v-if="order.status == 0" @click="cancel(order.billcode)">取消订单</a>
                  </div>-->
            </div>
        </div>
        <div class="loading"  v-loading="loading">

        </div>
    </div>
</div>
{/block}

{block name='footer'}{/block}
{block name='js'}
<script>
    var that

    new Vue({
        el:'#app',
        data: {
            orderList: [],
            orderList2: [],
            orderList3: [],
            loading: true
        },
        created() {
            that = this  //生成vue副本
            $('.loading').height(screen.height - 90)
            this.getOrder()
            this.orderList = this.orderList2
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            orderSort(e) {
                const orderSort = e.target.innerText
                const orderStatus = sessionStorage.getItem('myOrder_Status')
                if(orderSort === '进行中') {
                    this.orderList = this.orderList2
                }else {
                    this.orderList = this.orderList3
                }
                $(e.target).addClass('active')
                $(e.target).siblings().removeClass('active')
            },
            cancel(orderNo) {
                $.post('/index/sender/closeSendOrder',{code: orderNo},function (res) {
                    if(res.code === 0) {
                        that.$message({
                            message: '已取消该订单',
                            type: 'success',
                            center: true
                        });
                        setTimeout(() => {
                            location.reload()
                        }, 1200)
                    }
                },'json')
            },
            perfect(orderNo){
                this.$confirm(' 是否确认完成此订单?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    // type: 'warning'
                }).then(() => {
                    $.post('/index/person/getgood',{code: orderNo},function (res) {
                        if(res.code === 0) {
                            that.$message({
                                type: 'success',
                                message: '确认完成!',
                                center: true
                            });
                            setTimeout(() => {
                                location.reload()
                            }, 1200)
                        }
                    },'json')
                    // this.$message({
                    //     type: 'success',
                    //     message: '确认完成!'
                    // });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消确认'
                    });
                    return
                });
                // $.post('/index/sender/getgood',{code: orderNo},function (res) {
                //     if(res.code === 0) {
                //
                //         that.$message({
                //             message: '该订单',
                //             type: 'success',
                //             center: true
                //         });
                //         setTimeout(() => {
                //             location.reload()
                //         }, 1200)
                //     }
                // },'json')
            },
            getData(status,resolve,reject) {
                $.ajax({
                    type: 'post',
                    url: './mysender.html',
                    data: {status: status},
                    dataType: 'json'
                }).then(res => {
                    resolve(res)
                },err => {
                    reject(err)
                })
            },
            getOrder() {
                var p1 = new Promise((resolve, reject) => {
                    that.getData(0,resolve,reject)
                })
                var p2 = new Promise((resolve, reject) => {
                    that.getData(1,resolve,reject)
                })
                var p3 = new Promise((resolve, reject) => {
                    that.getData(2,resolve,reject)
                })
                Promise.all([p1, p2,p3]).then(res => {
                    console.log(res)
                    if(res[0].code === 0) {
                        for(item of res[0].data) {
                            console.log(0)
                            that.orderList2.push(item)
                        }
                        that.loading = false
                        $('.loading').hide()
                    }
                    if(res[1].code === 0) {
                        for(item of res[1].data) {
                            console.log(1)
                            that.orderList3.push(item)
                        }
                    }
                    if(res[2].code === 0) {
                        for(item of res[2].data) {
                            console.log(2)
                            that.orderList3.push(item)
                        }
                    }
                })
            },
            getTel(str) {
                const Tel =  /[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}/g;
                var telNum = str.match(Tel)[0]
                return telNum
            }
        }
    });
</script>
{/block}